import React from "react";

export default class ListKey extends React.Component {
  constructor() {
    super();
    this.state = {
      users: [
        { name: "用户1", age: "22", jobs: [{ title: 1, content: "java" }] },
        { name: "用户2", age: "20", jobs: [{ title: 2, content: "python" }] },
      ],
    };
  }

  addListData = () => {
    this.setState({
      users: this.state.users.concat({
        name: "用户3",
        age: "23",
        jobs: [{ title: 3, content: "c++" }],
      }),
    });
  };

  render() {
    const { users } = this.state;
    return (
      <div>
        <h1>循环渲染列表-key值问题</h1>
        <ul>
          {users.map((item, index) => {
            return (
              <li key={index}>
                {item.name}
                <h3>{item.age}</h3>
                <div>
                  {item.jobs.map((ele, i) => {
                    return (
                      <div key={i}>
                        <h4>{ele.title}</h4>
                        <h4>{ele.content}</h4>
                      </div>
                    );
                  })}
                </div>
              </li>
            );
          })}
        </ul>
        <button onClick={this.addListData}>列表添加数据</button>
      </div>
    );
  }
}
